<template>
  <div class="projectLeft">
    <el-menu
      :default-active="default_active"
      background-color="#f5f5f5"
      active-text-color="#01272f7"
      class="el-menu-vertical-demo"
    >
      <el-menu-item index="1" @click="toAll">
        <i class="el-icon-s-home"></i>
        <span slot="title">&emsp;&emsp;全部</span>
      </el-menu-item>

      <el-menu-item index="2" @click="toRecent">
        <i class="el-icon-time"></i>
        <span slot="title">&emsp;&emsp;最近查看</span>
      </el-menu-item>
      <el-menu-item index="3" @click="toStar">
        <i class="el-icon-star-on"></i>
        <span slot="title">&emsp;&emsp;我的收藏</span>
      </el-menu-item>
      <el-menu-item index="4" @click="toCreate">
        <i class="el-icon-user-solid"></i>
        <span slot="title">&emsp;&emsp;我创建的</span>
      </el-menu-item>
      <el-menu-item index="5" @click="toFinish">
        <i class="el-icon-files"></i>
        <span slot="title">&emsp;&emsp;已归档</span>
      </el-menu-item>
      <el-menu-item index="6" @click="toDelete">
        <i class="el-icon-delete"></i>
        <span slot="title">&emsp;&emsp;回收站</span>
      </el-menu-item>
    </el-menu>
    <div class="divide"></div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      default_active: this.$store.state.default_active,
    }
  },
  created () {

  },
  methods: {
    toAll() {
      this.$store.state.default_active = '1';
      this.$router.push('/program/show');
    },
    toRecent() {
      this.$store.state.default_active = '2';
      this.$router.push('/program/show/5');
    },
    toStar() {
      this.$store.state.default_active = '3';
      this.$router.push('/program/show/1');
    },
    toCreate() {
      this.$store.state.default_active = '4';
      this.$router.push('/program/show/2');
    },
    toFinish() {
      this.$store.state.default_active = '5';
      this.$router.push('/program/show/3');
    },
    toDelete() {
      this.$store.state.default_active = '6';
      this.$router.push('/program/show/4');
    },
  }
}
</script>

<style scoped>
.projectLeft {
  position: relative;
  margin-left: 86px;

  width: 285px;
  height: 100vh;
  border: 1px solid #BBBBBB;
  background-color: #f5f5f5;
}

.divide {
  position: absolute;
  left: 40px;
  top: 120px;
  width: 196px;
  height: 2px;
  background-color: #ababab;
  /*border-bottom: 2px solid #ababab;*/
}

ul {
  position: absolute;
  margin-top: 50px;
  margin-left: 0;
  width: 285px;
  height: 290px;
  border: none;
}

ul li {
  list-style: none;
  /*position: absolute;*/
  /*margin-left: 15px;*/
  padding-left: 50px !important;
  width: 285px;
  height: 70px;
  /*background-color: #f5f5f5;*/

  font-size: 20px;
  /*text-align: center;*/
  line-height: 70px;
  color: #646363;
}

ul li:nth-child(1) {
  margin-bottom: 2px;
}
</style>
